good-listener

What is good-listener?

The 'good-listener' npm package is a utility for managing event listeners in a more efficient and cleaner way. It provides a simple API to add and remove event listeners, ensuring that you can easily manage and clean up listeners to avoid memory leaks and other issues.

What are good-listener's main functionalities?

Add Event Listener

This feature allows you to add an event listener to a DOM element. The `listen` function returns a function that can be called to remove the event listener, making it easy to manage and clean up listeners.

const listen = require('good-listener');
const button = document.querySelector('button');
const removeListener = listen(button, 'click', () => {
  console.log('Button clicked!');
});

Remove Event Listener

This feature demonstrates how to remove an event listener that was previously added. The `listen` function returns a function that, when called, removes the event listener, ensuring that you can easily clean up listeners when they are no longer needed.

const listen = require('good-listener');
const button = document.querySelector('button');
const removeListener = listen(button, 'click', () => {
  console.log('Button clicked!');
});
// Later in the code
removeListener();

Other packages similar to good-listener

eventemitter3

EventEmitter3 is a high-performance event emitter for Node.js and the browser. It provides a similar functionality for managing events but is more focused on custom event handling rather than DOM events.

mitt

Mitt is a tiny functional event emitter. It is similar to 'good-listener' in that it provides a simple API for managing events, but it is more lightweight and focused on custom events rather than DOM events.

on

The 'on' package is a utility for adding and removing event listeners. It provides a similar API to 'good-listener' but is more focused on Node.js event handling rather than browser DOM events.

README

good-listener

A more versatile way of adding & removing event listeners.

Install

You can get it on npm.

npm install good-listener --save

Or bower, too.

bower install good-listener --save

If you're not into package management, just download a ZIP file.

Setup

Node (Browserify)

var listen = require('good-listener');

Browser (Standalone)

<script src="dist/good-listener.js"></script>

Usage

Add an event listener

By passing a string selector (see full demo).

listen('.btn', 'click', function(e) {
    console.log(e);
});

Or by passing a HTML element (see full demo).

var logo = document.getElementById('logo');

listen(logo, 'click', function(e) {
    console.log(e);
});

Or by passing a list of HTML elements (see full demo).

var anchors = document.querySelectorAll('a');

listen(anchors, 'click', function(e) {
    console.log(e);
});

Remove an event listener

By calling the destroy function that returned from previous operation (see full demo).

var listener = listen('.btn', 'click', function(e) {
    console.log(e);
});

listener.destroy();

Browser Support

Latest ✔	Latest ✔	Latest ✔	9+ ✔	Latest ✔	Latest ✔

License

MIT License © Zeno Rocha